<template>
  <div class="app-container home">
    <div class="card_top">
      <el-card shadow="never" class="box-card bg-white" style="height: 140px;">
        <span class="span-title">我的待办</span>
        <h1><span class="warning">{{work.toDo}}</span>个任务</h1>
      </el-card>
      <el-card shadow="never" class="box-card bg-white" style="height: 140px;">
        <span class="span-title">办理中</span>
        <h1><span class="primary">{{work.notFinishVal}}</span>个任务</h1>
      </el-card>
      <el-card shadow="never" class="box-card bg-white" style="height: 140px;">
        <span class="span-title">已完成</span>
        <h1><span class="success">{{work.finishVal}}</span>个任务</h1>
      </el-card>
    </div>
    <el-row :gutter="20" style="margin-top: 10px;">
      <el-col :span="24">
        <el-card shadow="never" class="box-card bg-purple-center" style="height: 360px;">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="未完成" name="un-finish">
              <el-table :data="tableData" style="width: 100%;" border height="270">
                <el-table-column prop="projectName" label="项目名称">
                  <template slot-scope="scope">
                    <span>{{scope.row.projectName}}</span>
                    <el-tooltip placement="bottom">
                      <div slot="content">
                        by: {{scope.row.remindBy}} <br /> {{scope.row.remindDt}}
                      </div>
                      <el-tag style="margin-left: 5px" type="danger" v-if="scope.row.isRemind == 'Y'">催办</el-tag>
                    </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column prop="deptName" label="所属部门" width="180"></el-table-column>
                <el-table-column prop="stdTp" label="标准规范层次" width="120"></el-table-column>
                <el-table-column label="当前步骤" align="left" width="180">
                  <template slot-scope="scope">
                    <el-button type="text" size="mini" @click="handleShowInfos(scope.row)" style="padding:0">>> {{scope.row.opt}}
                    </el-button>
                  </template>
                </el-table-column>
                <el-table-column label="开始日期" width="150">
                  <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 5px">{{ parseTime(scope.row.stmp, '{y}-{m}-{d}') }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="持续时长(天)" width="120">
                  <template slot-scope="scope">
                    <span :class=" scope.row.days>180? 'text-danger':'' "> {{scope.row.days}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="userName" label="当前办理人" width="120"></el-table-column>
                <el-table-column label="操作" width="180" align="left" class-name="small-padding fixed-width">
                  <template slot-scope="scope">
                    <!-- <el-button icon="el-icon-edit" size="mini" @click="handleEdit(scope.$index, scope.row)" >去办理</el-button>
                    :to="'/'+(scope.row.url).replace('/index','')"
                    -->
                    <router-link :to="{path:'/'+(scope.row.url).replace('/index',''),query:{nid:scope.row.nid,operatType:(scope.row.flowTo != null && (scope.row.flowTo).indexOf(userName)>=0)?'handle':'view'}}">
                      <el-button type="text" v-if=" scope.row.flowTo != null && (scope.row.flowTo).indexOf(userName)>=0 " icon="el-icon-edit" size="mini">去办理</el-button>
                      <el-button type="text" v-else size="mini">查看</el-button>
                    </router-link>
                    <el-button style="margin-left: 10px;" v-if="scope.row.isRemind == 'N' && scope.row.flowTo != null && (scope.row.flowTo).indexOf(userName)==-1 " v-hasRole="['admin', 'reminder']" type="text" size="mini" @click="handleRemind(scope.row)">催办</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="已完成" name="finish">
              <el-table :data="tableData2" style="width: 100%;" border height="270">
                <el-table-column prop="projectName" label="项目名称">
                  <template slot-scope="scope">
                    <span>{{scope.row.projectName}}</span>
                    <el-tooltip placement="bottom">
                      <div slot="content">
                        by: {{scope.row.remindBy}} <br /> {{scope.row.remindDt}}
                      </div>
                      <el-tag style="margin-left: 5px" type="danger" v-if="scope.row.isRemind == 'Y'">已催办</el-tag>
                    </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column prop="deptName" label="所属部门" width="180"></el-table-column>
                <el-table-column prop="stdTp" label="标准规范层次" width="120"></el-table-column>
                <el-table-column label="审批流程" width="180">
                  <template slot-scope="scope">
                    <el-button type="text" size="mini" @click="handleShowInfos(scope.row)" style="padding:0">>> {{scope.row.opt}}
                    </el-button>
                  </template>
                </el-table-column>
                <el-table-column label="操作流程" width="180">
                  <template slot-scope="scope">
                    <el-button type="text" size="mini" @click="selectNid(scope.row.nid)" style="padding:0">>> 查看审批节点信息
                    </el-button>
                  </template>
                </el-table-column>
                <el-table-column label="开始日期" width="200">
                  <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 5px">{{ parseTime(scope.row.stmp, '{y}-{m}-{d}') }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="办结日期" width="200">
                  <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 5px">{{scope.row.finish_dt}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="180" align="left" class-name="small-padding fixed-width">
                  <template slot-scope="scope">
                    <router-link :to="{path:'/'+(scope.row.url).replace('/index',''),query:{nid:scope.row.nid,operatType:'view'}}">
                      <el-button type="text" icon="el-icon-view" size="mini">查看</el-button>
                    </router-link>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
    <el-card shadow="never" class="box-card-bottom bg-purple-center">
      <h1>标准规范说明</h1>
      <p>标准规范层次：国际标准、国家标准、行业标准、地方标准、团体标准、指南指引。</p>
      <p>团体标准和指南指引无需立项，起草后，通过部门审核即可。</p>
      <p>地方标准：深圳市地方标准含广东省地方标准、深圳特区技术规范、深圳市标准化指导性技术文件、深圳市水务工程建设标准等。</p>
    </el-card>
    <!-- 添加或修改标准规范审批处审查对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1080px" append-to-body>
      <el-card shadow="never" class="box-card">
        <div slot="header" class="clearfix">
          <span style="font-size: 16px;font-weight: 600;">审批流程</span>
        </div>
        <el-form label-width="120px">
          <el-row v-for="opn in opinionList" :key="opn.id">
            <el-col :span="24" v-if="opn.userid">
              <el-form-item :label="opn.node">
                <el-input placeholder="" type="textarea" :value="opn.opn" readonly></el-input>
                <div style="position: absolute;right:20px;margin-top: -30px;">
                  <span>{{opn.name}}</span>
                  <span style="margin-left: 20px;">{{opn.st}}</span>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="24" v-else>
              <h4 style="margin-left: 30px;"> >>> {{opn.opt}} {{opn.opn}}
                <span style="margin-left: 20px;font-weight: 100;">{{opn.name}}</span>
                <span style="margin-left: 20px;font-weight: 100;">{{opn.st}}</span>
              </h4>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </el-dialog>
    <el-dialog title="标准规范审批节点信息" :visible.sync="open1" width="1080px" append-to-body>
      <el-card style="height:700px;overflow-y: auto">
        <TreeNode :items="items"></TreeNode>
      </el-card>
    </el-dialog>
  </div>
</template>
<script>
import { getWorks } from "@/api/system/user";
import { getApprovalsNodes, } from "@/api/result/show"
import store from "@/store";
import { listOpinion } from "@/api/standard/flow";
import TreeNode from "@/views/result/show/charts/TreeNode";
import { addRemind } from "@/api/standard/remind";

export default {
  name: "index",
  components: { TreeNode },
  data() {
    return {
      // 版本号
      version: "3.2.0",
      loading: false,
      work: {
        finishVal: null,
        notFinishVal: null,
        toDo: 0,
        back: null,
      },
      activeName: 'un-finish',
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 100,
        nid: null,
        stamp: null,
        userid: null,
        opt: null,
        ctn: null,
        res: null,
        opn: null,
        flowToUserid: null,
        flowToRoleid: null,
        flowToDeptid: null,
        currNodeK: null,
        currNode: null,
        nextNodeK: null,
        nextNode: null
      },
      form: {},
      opinionList: [],
      title: null,
      open: false,
      open1: false,
      // 当前用户名
      userName: store.getters && store.getters.name,
      tableData: [],
      tableData2: [],
      //节点开始颜色
      nodeOnColor: '#1890ff',
      //节点结束颜色
      nodeOffColor: '#747577',
      items: [],
      itemsModel: [{
          tag: '立项通知',
          color: '#747577',
          htmlMode: true,
          content: '暂无信息'
        },
        {
          tag: '标准规范起草',
          color: '#747577',
          htmlMode: true,
          content: '暂无信息'
        },
        {
          tag: '征求意见阶段尚未开始',
          color: '#747577',
          htmlMode: true,
          content: '暂无信息'
        },
        {
          tag: '审批处审查阶段尚未开始',
          color: '#747577',
          htmlMode: true,
          content: '暂无信息'
        },
        {
          tag: '技术委员会审议阶段尚未开始',
          color: '#747577',
          htmlMode: true,
          content: '暂无信息'
        },
        {
          tag: '局长办公会审议阶段尚未开始',
          color: '#747577',
          htmlMode: true,
          content: '暂无信息'
        },
        {
          tag: '标准规范发布阶段尚未开始',
          color: '#747577',
          htmlMode: true,
          content: '暂无信息'
        },
        {
          tag: '标准规范实施阶段尚未开始',
          color: '#747577',
          htmlMode: true,
          content: '暂无信息'
        }
      ],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
    getMyWorks() {
      console.log("获取待办数量...")

      // getWorks().then(response => {
      //   console.log(response)
      // });
    },

    getList() {
      this.loading = true;
      getWorks().then(response => {
        // console.log(response.list)
        this.work = response.works
        this.tableData = response.list
        this.tableData2 = response.listFinish
        this.loading = false;
      });
    },

    // 表单重置
    reset() {
      this.form = {
        id: null,
        userid: null,
        remindUserId: null,
        flowId: null
      };
    },

    // 查看审批流程
    handleShowInfos(row) {
      this.loading = true;
      this.queryParams.nid = row.nid
      listOpinion(row.nid, '').then(response => {
        this.opinionList = response.data
        this.open = true
        this.loading = false;
      });
    },
    // 催办操作
    handleRemind(row) {
      this.reset();
      //设置催办人id，催办节点id
      this.form.remindUserId = row.userid
      this.form.flowId = row.mid

      this.$confirm('是否确认催 "' + row.userName + '" 办理 "' + row.projectName + '" 数据项?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.submitForm()
      })
    },
    // 保存催办信息
    submitForm() {
      addRemind(this.form).then(response => {
        this.msgSuccess("催办成功");
        this.getList();
      });
    },
    // 切换tab
    handleClick(tab, event) {
      // console.log(tab, event);
    },
    selectNid(nid) {
      console.log(1)
      this.items = JSON.parse(JSON.stringify(this.itemsModel));
      this.queryParams.nid = nid
      getApprovalsNodes(this.queryParams).then(response => {
        if (response.code == 200) {
          var data = response.data;
          if (data != null && JSON.stringify(data) !== '{}') {
            this.nodesCommonFunc(data.tb_nop_m, "立项通知", 0);
            this.nodesCommonFunc(data.tb_standd, "标准规范起草", 1);
            this.nodesCommonFunc(data.tb_request, "征求意见", 2);
            this.nodesCommonFunc(data.tb_tecreview, "审批处审查", 3);
            this.nodesCommonFunc(data.tb_tecconsider, "技术委员会审议", 4);
            this.nodesCommonFunc(data.tb_dgconsider, "局长办公会审议", 5);
            this.nodesCommonFunc(data.tb_spub, "标准规范发布", 6);
            this.nodesCommonFunc(data.tb_simp, "标准规范实施", 7);
          }
          this.open1 = true;
        }
      });
    },
    //【标准规范审批节点信息】中节点信息处理
    nodesCommonFunc(msg, progressName, itemsIndex) {
      if (msg != null) {
        this.items[itemsIndex].color = this.nodeOnColor;
        var stamp = msg[0].stamp;
        this.items[itemsIndex].tag = progressName + `阶段 始于` + this.formatter(stamp, "yyyy-MM-dd hh:mm:ss");
        //判断是否有附件
        var files = null;
        if (msg[0].fname != null) {
          //如果有附件
          var itemContent = "资料清单包括：<br>";
          for (var i = 0; i < msg.length; i++) {
            if (msg[i].fname != null) {
              itemContent += "<a style='font-weight: bold;text-decoration: underline;'>" + msg[i].fname + "</a> 1份 <span style='color:#2ba3fd;'>" +
                msg[i].nick_name + "</span>于" + this.formatter(msg[i].atts_time, "yyyy-MM-dd hh:mm:ss") + "上传";
            }
            itemContent += "<br>";
          }
          this.items[itemsIndex].content = itemContent;
        } else {
          this.items[itemsIndex].content = "暂无信息";
        }
      }
    },
    //日期格式化
    formatter(thistime, fmt) {
      let $this = new Date(thistime)
      let o = {
        'M+': $this.getMonth() + 1,
        'd+': $this.getDate(),
        'h+': $this.getHours(),
        'm+': $this.getMinutes(),
        's+': $this.getSeconds(),
        'q+': Math.floor(($this.getMonth() + 3) / 3),
        'S': $this.getMilliseconds()
      }
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, ($this.getFullYear() + '').substr(4 - RegExp.$1.length))
      }
      for (var k in o) {
        if (new RegExp('(' + k + ')').test(fmt)) {
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
        }
      }
      return fmt
    },
  },
};

</script>
<style scoped lang="scss">
@import "~@/assets/styles/utils";
.header_ {
  @include flex-row-sb-c;
}
.home {
  .card_top {
    width: 100%;
    height: 140px;
    margin-bottom: 24px;
    @include flex-row-sb-c;

    .box-card {
      width: calc((100% - 48px) / 3);
    }
  }

  .box-card-bottom {
    width: 100%;
    height: 250px;
    margin-top: 24px;
  }

  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  /* font-family: "open sans",
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif; */
  font-family: PingFangSC-Medium;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}

.bg-white {
  /* background: #F8F8F9; */
  height: 140px;
  text-align: center;
  padding-top: 15px;
  border: 1px solid #DFE6EB;
}

.bg-purple-center {
  /* background: #F8F8F9; */
  text-align: center;
  border: 1px solid #DFE6EB;
}

.bg-purple-left {
  /* background: #F8F8F9; */
  text-align: left;
  border: 1px solid #DFE6EB;
}

.span-title {
  color: #909399;
  font-size: 18px;
  margin-bottom: 20px;
  display: block;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}


.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

</style>
